import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
import _ from 'lodash'
import {
    BrowserRouter as Router,
    Route,
    Link,
    Redirect,
    withRouter
} from "react-router-dom"
import {
    LocaleProvider,
    Layout,
    Menu,
    Breadcrumb,
    Icon,
    Form,
    Input,
} from 'antd'
import zhCN from 'antd/lib/locale-provider/zh_CN'
import util from './common/util'
import '../style/less/admin.less'


const { Header, Content, Sider, Footer } = Layout
const { SubMenu } = Menu
const FormItem = Form.Item

const mountNode = document.getElementById('root')

class SideMenu extends React.Component {
    constructor() {
        super()
        let menus = [{
            key: 'cash',
            icon: 'pay-circle',
            name: '支付管理',
            url: '/admin/cash',
        },{
            key: 'rescue',
            icon: 'gift',
            name: '金币管理',
            url: '/admin/rescue',
        },{
            key: 'user',
            icon: 'user',
            name: '用户管理',
            url: '/admin/user',
        }]
        let url = window.location.pathname
        let defaultKey = ''
        for (let item of menus) {
            if (item.url === url) {
                defaultKey = item.key
                break
            }
        }
        this.state = {
            defaultKey,
            menus,
        }
    }
    navigate(item) {
        let url = ''
        this.props.history.push(`/admin/${item.key}`)
    }
    render() {
        return (
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={[this.state.defaultKey]}
                onSelect = { this.navigate.bind(this) }
            >
                { this.state.menus.map( menu => 
                    <Menu.Item key={menu.key}>
                        <span>{menu.name}</span>
                    </Menu.Item>
                )}
            </Menu>
        )
    }
}

const SideMenuWrapper = withRouter(SideMenu)

class App extends React.Component {
    constructor() {
        super()
    }
    render() {
        let app = null
        app = (
            <Layout style={{ height: '100%' }}>
                <Header className="header">
                    <div className="logo">LOGO 运营平台</div>
                    <Menu
                        theme="dark"
                        mode="horizontal"
                        defaultSelectedKeys={['2']}
                    >
                        <Menu.Item key="1">顶部菜单</Menu.Item>
                        <Menu.Item key="2">顶部菜单</Menu.Item>
                    </Menu>
                    <div className="nav-menu">
                        <span className="user-name">user</span>
                        <a href="/signOut">退出</a>
                    </div>
                </Header>
                <Content className="content">
                    <Layout>
                        <Sider className="side-menu">
                            <h2 className="menu-title">父级菜单</h2>
                            <SideMenuWrapper />
                        </Sider>
                        <Content>
                        </Content>
                    </Layout>
                </Content>
            </Layout>
        )
        return (
            <LocaleProvider locale={zhCN}>{app}</LocaleProvider>
        )
    }
}

ReactDOM.render(<Router><App /></Router>, mountNode)

